<template>
  <div class="home_banner">
    <div class="home_bannerTop">
      <div class="home_banner_search" @click="e_gosearch">
        <div class="hbs_icon"></div>
        <span class="hbs_input">请输入您所要搜索的内容</span>
        <!--<input class="hbs_input" type="text" placeholder="请输入您所要搜索的内容" readonly>-->
      </div>
      <div class="home_banner_container">
        <mt-swipe :auto="2000" class="home_banner_imgs">
          <mt-swipe-item v-for="(v,i) in banner" :key="i">
            <img class="home_banner_imgs" :src="v.pic">
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </div>
    <div class="notice" v-show="noticeShow">
      <notice :id="noticeId" @close="_close"></notice>
    </div>
  </div>
</template>

<script>
  import userImg from '@imgs/self/user_img.png'
  import banner from '@imgs/home/homebanner.png'
  import gg from '@imgs/home/GG.png'
  import notice from '@c/notice/notice'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'

  export default {
    name: '',
    data() {
      return {
        userImg,
        banner: [],
        listLeft: 0,//公共位置
        fixedWidth: 0,//固定宽度
        speend: 3,//文字滚动速度
        noticeTile: [], //公告标题
        pat: [], //拍的人员
        gg, //广告图标
        width: 0,
        noticeId: '',
        noticeShow: false,
      }
    },

    components: {
      notice,
    },

    computed: {},

    methods: {
      e_gosearch() {
        this.$router.push('/search')
      },
      // 获得轮播图
      _getBanner() {
        vpost(vlink.home.banner).then(re => {
          if (re.status === 0) {
            this.banner = re.data
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 走马灯
      showMarquee() {
        this.listLeft -= this.speend
        if (Math.abs(this.listLeft) > this.width) {
          this.listLeft = this.fixedWidth
        }
      },
      // 获得公告数据
      _getNotice() {
        vpost(vlink.home.noticeTile).then(re => {
          if (re.status === 0) {
            this.noticeTile = re.data.xList
            this.pat = re.data.pList
            if (re.data.xList === undefined) {
              return
            }
            this.$nextTick(() => {
              this.width = this._getWidth(this.$refs.item)
              this.$refs.list.style.width = this.width + 'px'
              this.fixedWidth = this.$refs.fiexWidth.offsetWidth
              setInterval(this.showMarquee, 100)
            })
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 获得li宽度
      _getWidth(val) {
        let width = 0
        for (let i = 0; i < val.length; i++) {
          width += val[i].offsetWidth
        }
        return width
      },
      // 点击公告展现公告内容
      _isNotice(id) {
        this.noticeShow = true
        this.noticeId = id
      },
      // 关闭
      _close(index) {
        this.noticeShow = false
      },
    },

    mounted() {
      this._getNotice()
    },
    created() {
      this.$nextTick(() => {

      })
      this._getBanner()
    },
  }
</script>
